<template>
  <div class="invitation-container">
    <el-card class="invitation-card">
      <template #header>
        <div class="card-header">
          <h2>心灵邀请函生成器</h2>
          <el-tag type="info">AI驱动的个性化建议</el-tag>
        </div>
      </template>
      
      <el-form :model="form" label-position="top">
        <el-form-item label="请输入你的烦恼或困惑">
          <el-input
            v-model="form.userInput"
            type="textarea"
            :rows="4"
            placeholder="描述你的问题，我们将为你提供个性化的建议..."
            maxlength="500"
            show-word-limit
          />
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            @click="generateInvitation"
            :loading="isLoading"
            :disabled="!form.userInput.trim()"
          >
            <el-icon><Edit /></el-icon>
            生成邀请函
          </el-button>
          <el-button @click="resetForm">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
      
      <el-divider v-if="invitationContent.gameConclusion || invitationContent.teacherConclusion" />
      
      <div v-if="invitationContent.gameConclusion || invitationContent.teacherConclusion" class="result-container">
        <el-alert
          v-if="errorMsg"
          :title="errorMsg"
          type="error"
          :closable="false"
          show-icon
        />
        
        <el-tabs v-model="activeTab" v-else>
          <el-tab-pane label="游戏推荐" name="games">
            <div class="content-section">
              <h3>推荐游戏</h3>
              <p>{{ invitationContent.gameConclusion }}</p>
              <div class="tags-container" v-if="invitationContent.gameIds && invitationContent.gameIds.length">
                <h4>游戏ID</h4>
                <el-tag 
                  v-for="id in invitationContent.gameIds" 
                  :key="id"
                  type="success"
                  effect="plain"
                >
                  {{ id }}
                </el-tag>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="导师建议" name="teachers">
            <div class="content-section">
              <h3>导师建议</h3>
              <p>{{ invitationContent.teacherConclusion }}</p>
              <div class="tags-container" v-if="invitationContent.teacherIds && invitationContent.teacherIds.length">
                <h4>导师ID</h4>
                <el-tag 
                  v-for="id in invitationContent.teacherIds" 
                  :key="id"
                  type="primary"
                  effect="plain"
                >
                  {{ id }}
                </el-tag>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { Edit, Refresh } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import api from '@/api'
export default {
  name: 'InvitationGenerator',
  components: {
    Edit,
    Refresh
  },
  setup() {
    const form = reactive({
      userInput: ''
    });
    
    const isLoading = ref(false);
    const errorMsg = ref('');
    const activeTab = ref('games');
    
    const invitationContent = reactive({
      gameConclusion: '',
      teacherConclusion: '',
      gameIds: [],
      teacherIds: []
    });

    const generateInvitation = async () => {
      if (!form.userInput.trim()) {
        ElMessage.warning('请输入内容后再生成');
        return;
      }
      
      isLoading.value = true;
      errorMsg.value = '';
      
      try {
        const response = await api.generateInvitation(form.userInput)
        console.log(response)
        
        if (response && response.ok) {
          invitationContent.gameConclusion = response.game_conclusion || '';
          invitationContent.teacherConclusion = response.teacher_conclusion || '';
          invitationContent.gameIds = response.game_ids || [];
          invitationContent.teacherIds = response.teacher_ids || [];
          ElMessage.success('邀请函生成成功');
        } else {
          errorMsg.value = response.message || '生成失败，请稍后重试';
        }
      } catch (error) {
        console.error('生成邀请函失败:', error);
        errorMsg.value = '生成失败，请稍后重试';
      } finally {
        isLoading.value = false;
      }
    };
    
    const resetForm = () => {
      form.userInput = '';
      errorMsg.value = '';
      invitationContent.gameConclusion = '';
      invitationContent.teacherConclusion = '';
      invitationContent.gameIds = [];
      invitationContent.teacherIds = [];
    };
    
    return {
      form,
      isLoading,
      errorMsg,
      activeTab,
      invitationContent,
      generateInvitation,
      resetForm
    };
  }
}
</script>

<style scoped>
.invitation-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.invitation-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  color: #303133;
}

.result-container {
  margin-top: 20px;
}

.content-section {
  padding: 15px 0;
}

.content-section h3 {
  margin-top: 0;
  color: #409EFF;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 10px;
}

.content-section h4 {
  margin: 15px 0 10px;
  color: #606266;
  font-size: 16px;
}

.content-section p {
  text-align: left;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.el-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
